@import "./var"
@import "./mixin"

$tabbar-bg-color: #fff

.wrapper
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0


.content
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 88px


.login-content
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin-top: 0

$tabbar-height: 168px
.tabbar
  flex-direction: row
  position: fixed
  bottom: 0
  left: 0
  right: 0
  height: $tabbar-height
  &-bg
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 110px
    align-items: center
    @include border-top(1, solid, #ddd)
    background-color: $tabbar-bg-color
    box-shadow: 0 0 10px rgba(106, 106, 106, 0.4)
  &-inner
    position: absolute
    flex-direction: row
    bottom: 10px
    left: 0
    right: 0
    height: $tabbar-height
    align-items: flex-end
  &-circle
    width: 120px
    height: 120px
    background-color: #fff
    border-radius: 60px
    box-shadow: 0 0 10px rgba(106, 106, 106, 0.4)
    &-wrapper
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      flex-direction: row
      justify-content: center

.tabitem-container
  flex: 1
  flex-direction: column
  align-items: center
  justify-content: flex-end
  height: $tabbar-height


.tabitem-top-line
  position: absolute
  top: 0
  left: 0
  right: 0
  height: 2px


.tabitem-tab-icon
  width: 38px
  height: 38px
  position: absolute
  top: 0
  left: 0
  opacity: 0
  &-show
    opacity: 1

.tabitem-icon-wrapper
  position: relative
  margin-top: 1px
  width: 40px
  height: 40px


.tabitem-tab-text
  margin-top: 5px
  text-align: center
  font-size: 28px


.tabitem-icon
  &-circle
    width: 104px
    height: 104px
    border-radius: 52px
    background-color: #fae74f
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center
    &-wrapper
      width: 120px
      height: 120px
      background-color: #fff
      border-radius: 60px
      display: flex
      flex-direction: row
      align-items: center
      justify-content: center
    &-icon
      width: 50px
      height: 50px

